<template>
    <ul class="nav nav-tabs toperBox">
        <li class="nav-item" @click="status = true">
            <a class="nav-link " :class="{
                'active': status
            }" aria-current="page" @click.prevent="" href="#">Active</a>
        </li>
        <li class="nav-item" @click="status = false" @click.prevent="" :class="{
            'active': !status
        }">
            <a class="nav-link" href="#">Link</a>
        </li>
    </ul>
    <UploadFrom :up-loadtitle="status ? '上传头像' : '上传专栏头像'" :title="status ? '修改个人信息' : '修改专栏信息'" :from="from"
        :before-upload="beforeUpload" :default-img="setDefultImg()" :fromData="fromType"
        upload-background="rgba(0,0,0,0)" :finish="finish" :imageStyle="{
            'border-radius': '50%',
            'height': '300px',
            'width': '300px',
        }" sumbit="确认修改" :input-sumbit="sumbit">
        <template #context="{ status }">
            <h3 style="color:white;border-radius: 50%;">
                {{ upLoadingShowText[status] }}
            </h3>
        </template>
    </UploadFrom>
</template>

<script lang='ts'>
import { ref, defineComponent, computed, onMounted, watch, reactive } from 'vue'
import { useStore } from 'vuex'
import { reqChangeUset, changeUsetData, reqSomeColumns, reqChangeColumn } from '../../api/main'
import UploadFrom, { FromProps, useFrom, beforeUpload, inputSumbit, result, finish } from '../../components/UoLoadFrom/index.vue'
import { Message } from '../../coustom/Message'
interface coloumData {
    "_id": string,
    "title": string,
    "description": string,
    "avatar"?: {
        "_id": string,
        "url": string,
        "createdAt": string
    },
    "author": string,
    "createdAt": string
}
interface changeColoum {
    "title": string,
    "description": string,
    "avatar"?: string
}
interface inputResult {
    nickName: string,
    description: string
}
export default defineComponent({
    name: 'Edit',
    components: { UploadFrom },
    setup() {
        const store = useStore()
        const from = useFrom()
        const coloumData = ref<null | coloumData>(null)
        const defaultImg = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.kan302.com%2Fuserup%2F1405%2F191136252R3.jpg&refer=http%3A%2F%2Fimg.kan302.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653543143&t=8c9f61ced8763f87a4c96d9b5665dc67'
        const setDefultImg = () => {
            if (status.value && userImg.value) {
                return userImg.value.url
            } else if (!status.value && coloumData.value && coloumData.value.avatar && coloumData.value.avatar.url) {
                return coloumData.value.avatar.url
            }
            return defaultImg
        }
        const upLoadingShowText = ['上传头像', '上传中', '上传成功', '上传失败']
        const inputData: changeUsetData = {
            _id: '',
            email: '',
            nickName: '',
            description: '',
            avatar: '',
            column: ''
        }
        const colum: changeColoum = {
            "title": '',
            "description": '',
        }
        const fromType: FromProps = [
            {
                titel: '名称',
                valueKey: 'nickName',
                rules: [
                    {
                        type: 'required',
                        text: '名称是必填项！'
                    }
                ]
            },
            {
                titel: '个人简介',
                valueKey: 'description',
                inputType: 'textarea',
                row: 5,
                rules: [
                    {
                        type: 'required',
                        text: '简介是必填项！'
                    }
                ]
            }
        ]
        const status = ref<boolean>(true)
        const userId = computed(() => store.getters.userID)
        const usernName = computed(() => store.getters.userName)
        const columId = computed(() => store.getters.colomId)
        const userDescription = computed(() => store.getters.userDescription)
        const userImg = computed(() => store.getters.userAvatar)

        const userEmil = computed(() => store.getters.userEmil)
        const getColoumData = async () => {
            try {
                coloumData.value = await (await reqSomeColumns(columId.value)).data as coloumData
            } catch (e) {
                Message.error('数据请求失败' + e)
            }
        }
        const beforeUpload: beforeUpload = (File: File) => {
            let result: ReturnType<beforeUpload> = true
            if (File.size / 1024 / 1024 > 10) {
                result = '文件过大'
            } else if (File.type !== 'image/jpeg' && File.type !== 'image/png') {
                result = '文件类型只支持jpeg或者png格式'
            }
            return result
        }
        const sumbit: inputSumbit = (result: inputResult) => {
            const { nickName, description } = result
            if (status.value) {
                inputData.nickName = nickName
                inputData.description = description
                inputData._id = userId.value as string
                inputData.column = columId.value
                inputData.email = userEmil.value
                reqChangeUset(userId.value, inputData).then(success => {
                    Message.success('更改成功')
                }).catch((err) => {
                    Message.error(err)
                })
            } else {
                colum.title = nickName
                colum.description = description
                reqChangeColumn(columId.value, colum).then(success => {
                    Message.success('更改成功')
                }).catch((err) => {
                    Message.error(err)
                })
            }
        }
        watch(status, () => {
            if (status.value) {
                from.setValue({
                    nickName: usernName.value,
                    description: userDescription.value ? userDescription.value : '我是您的默认简介'
                })
            } else {
                if (coloumData.value) {
                    from.setValue({
                        nickName: coloumData.value.title,
                        description: coloumData.value.description
                    })
                }
            }
        })
        const finish: finish = (result: result) => {
            if (status.value) {
                inputData.avatar = result.data._id
            } else {
                colum.avatar = result.data._id
            }

        }
        onMounted(() => {
            from.setValue({
                nickName: usernName.value,
                description: userDescription.value ? userDescription.value : '我是您的默认简介'
            })
            getColoumData()
        })

        return { fromType, status, upLoadingShowText, setDefultImg, coloumData, defaultImg, finish, userDescription, userImg, usernName, from, beforeUpload, sumbit }
    }
})
</script>
<style scoped lang="less">
.toperBox {
    width: 90%;
    margin: 0 auto;
    max-width: 800px;
    margin-bottom: 20px;
}
</style>